<template>
  <div class="app-container">
    <el-alert title="信用商业服务" type="info" :closable="false" show-icon style="margin-bottom: 20px;">
      <template slot>
        通过信用分享受便捷租房、酒店预订、商品购买等商业服务，让信用成为您的通行证。
      </template>
    </el-alert>

    <!-- 用户信用分展示 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="24">
        <el-card>
          <div class="score-display">
            <span class="score-label">当前信用分：</span>
            <span class="score-value">{{ userScore }}</span>
            <span class="score-desc">分</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 服务分类 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="便捷租房" name="rental">
        <rental-service :user-score="userScore" />
      </el-tab-pane>
      <el-tab-pane label="酒店预订" name="hotel">
        <hotel-service :user-score="userScore" />
      </el-tab-pane>
      <el-tab-pane label="商品购买" name="goods">
        <goods-service :user-score="userScore" />
      </el-tab-pane>
      <el-tab-pane label="商品推荐" name="recommendation">
        <goods-recommendation :user-score="userScore" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RentalService from './components/RentalService.vue'
import HotelService from './components/HotelService.vue'
import GoodsService from './components/GoodsService.vue'
import GoodsRecommendation from './components/GoodsRecommendation.vue'
import { getUserScore } from '@/api/credit/businessService'

export default {
  name: "CreditBusinessService",
  components: {
    RentalService,
    HotelService,
    GoodsService,
    GoodsRecommendation
  },
  data() {
    return {
      userScore: 0,
      activeTab: 'rental'
    };
  },
  created() {
    this.getUserScore();
  },
  methods: {
    /** 获取用户信用分 */
    getUserScore() {
      getUserScore().then(response => {
        if (response.code === 200) {
          this.userScore = response.data.creditScore || 750;
        } else {
          this.userScore = 750; // 默认值
        }
      }).catch(() => {
        this.userScore = 750; // 默认值
      });
    },
    /** 切换标签页 */
    handleTabClick(tab) {
      this.activeTab = tab.name;
    }
  }
};
</script>

<style scoped>
.score-display {
  text-align: center;
  padding: 20px;
}

.score-label {
  font-size: 16px;
  color: #606266;
}

.score-value {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  margin: 0 8px;
}

.score-desc {
  font-size: 16px;
  color: #606266;
}
</style> 